<template>
  <div class="card-wrap">
    <Title>
      <template #content>
        <p class="title">库存出入库统计</p>
        <icon-double-right style="color: #999; margin-left: 5px; font-size: 16px" />
      </template>
    </Title>
    <a-button-group class="type-w" size="small">
      <a-button class="group-item"> 国内仓 </a-button>
      <a-button class="group-item"> FBA仓 </a-button>
      <a-button class="group-item"> 海外仓 </a-button>
    </a-button-group>
    <HomeLineChart style="margin-top: 20px" :targetList="targetList" :xData="xData" :dataMap="dataMap" :checkedKeys="checkedKeys" />
  </div>
</template>

<script lang="ts" setup>
  import { ref } from 'vue'
  import Title from './Title.vue'
  import HomeLineChart from './HomeLineChart.vue'

  const targetList = ref<Array<any>>([
    {
      name: '出库数量',
      value: 23,
      type: 1,
      value1: 29,
      value2: 29,
      key: '1',
      color: '#73c0de',
      width: '24%',
    },
    {
      name: '出库金额',
      value: 23.11,
      type: 2,
      value1: 69.72,
      value2: 29.45,
      unit: '$',
      key: '2',
      color: '#ee6666',
      line: 10,
      width: '24%',
    },
    {
      name: '入库数量',
      value: 100,
      type: 1,
      value1: 69,
      value2: 29,
      key: '3',
      color: '#fac858',
      width: '24%',
    },
    {
      name: '入库金额',
      value: 100.0,
      type: 2,
      value1: 69.72,
      value2: 29.45,
      unit: '$',
      key: '4',
      color: '#91cc75',
      width: '24%',
    },
  ])
  const xData = ['10/01', '10/02', '10/03', '10/04', '10/05', '10/06', '10/07']
  const checkedKeys = ref<Array<string>>(['1', '2'])
  const dataMap = {
    '1': [5, 10, 8, 15, 12, 20, 28],
    '2': [520, 350, 800, 1200, 920, 2400, 3200],
    '3': [5, 10, 8, 15, 12, 20, 28],
    '4': [520, 350, 800, 1200, 920, 2400, 3200],
  }
</script>

<style lang="less" scoped>
  .type-w {
    position: absolute;
    right: 10px;
    top: 10px;
  }
  .arco-btn-group {
    border: 1px solid var(--color-secondary-hover);
  }
  .group-item {
    background-color: #fff;
    line-height: 28px;
    &:hover {
      background-color: #fff;
      color: rgb(var(--primary-6));
    }
  }
</style>
